<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
		<title>Image Manager</title>
		<link type="text/css" rel="stylesheet" type="text/css" href="<?php echo css_link('j_pagination.css','admin');?>" />
		<script type="text/javascript" src="<?php echo js_link('jquery-1.7.1.min.js','admin');?>"></script>
		<?php
	        $uri    = $this->uri->uri_to_assoc(4);
	        $uri_2  = $uri;unset($uri_2['dir']);
	       //echo "uri_dir = ",$uri['dir'];
        ?>
		<script type="text/javascript">
			$(function (){
				$('[class*=remove_]').click(function () {
					var i_class = $(this).attr('class');
					
					$.ajax({
						type: "POST",
						url: "<?php echo admin_url('video-thumbnail/delete'); ?>",
						data: "src=" + $(this).attr('src'),
						success: function(success) {
							if(success) {
								$('#'+i_class).fadeOut();
							}
						}
					});
					return false;
				});

				//On Click Event
                $("ul.tabs li").click(function() {
                    $("ul.tabs li").removeClass("active"); //Remove any "active" class
                    $(this).addClass("active"); //Add "active" class to selected tab
                    $(".tab_content").hide(); //Hide all tab content
                    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
                    $(activeTab).fadeIn(); //Fade in the active content
                    return false;
                });
			});

			function togleUpload(){
                $("#UploadImages").toggle('medium',function () {
                    if($("#toggleText").html()=='Close upload form'){
                        $("#toggleText").html('Show upload form');
                    }else {
                        $("#toggleText").html('Close upload form');
                    }
                });
            }

			function add_to(src){
                <?php if(isset($uri['position'])){ ?>
                    <?php if($uri['position'] == 'vid'){ ?>
	                    window.opener.$("#image_thumb").attr('src', src);
	                    window.opener.$("#image").val(src);
                    <?php }else{ ?>
                    	window.opener.$("#"+window.opener.ADMIN_IMAGE_INPUT_TEXT).val(src);
                    <?php } ?>
                <?php } ?>
                window.close();
			}
		</script> 
	</head>
	<body>
		<h1>Hello Anthony Tran</h1>
	 	<?php echo $this->message->display(); ?>
		<div style="display: none;" id="UploadImages">
            <ul class="tabs">
                <li class="active"><a href="#tab1">Upload</a></li>
                <li><a href="#tab2">Create Folder</a></li>
            </ul>
            
            <div class="tab_container">
                <div class="tab_content" id="tab1">
                    <form enctype="multipart/form-data" style="padding-top: 10px;" name="add_image" id="add_image" action="<?php echo admin_url('video-image/upload/'.$this->uri->assoc_to_uri($uri))?>" method="post">
	                    <div id="photo-add">
		                    <div>
		                        <b>Upload options</b>:
		                        <div style="margin-left: 40px;">
			                        <div style="line-height: 30px;">
				                        Upload to: 
				                        <select style="width: 300px; padding: 2px; margin-left: 40px;" name="uploadTo" id="uploadTo">
					                        <option value="">Select folder...</option>
					                        <?php if($list_folder){ ?>
						    				    <?php foreach($list_folder as $f){ ?>
						    				      <?php if($f<=2012){ ?>
						                          	<option value="<?php echo $f;?>"><?php echo $f;?></option>
						                          <?php } ?>
						                        <?php } ?>
					                        <?php } ?>
				                        </select>
			                        </div>
			                        
			                        <div style="line-height: 30px;">
				                        Thumb Priority:
				                        <select style="width: 300px; padding: 2px; margin-left: 11px;" name="thumbOption">
					                        <option>Select demension priority...</option>
					                        <option style="color: green; margin-left: 20px;" value="width">Width</option>
					                        <option style="color: green; margin-left: 20px;" value="height">Height</option>
				                        </select>
			                        </div>
		                        </div>
		                    </div>
	                    
		                    <div>
		                        <b>Select file to upload</b>:
		                        <div style="margin-left: 40px;">
		                        <div id="images_wrap" class="MultiFile-wrap">
		                        <input type="file" accept="gif|jpg|jpeg|png" id="images" name="art_image" maxlength="10" class="multi MultiFile-applied" />
		                        </div><br />
		                        <input type="submit" value="Upload images" />
		                        </div>
		                    </div>
	                    </div>
                    </form>
                </div>
                
                <div id="tab2" class="tab_content" style="display: none;"> 
                    <form method="post" action="<?php echo admin_url('video-thumb/create-dir/position/vid/'.(isset($uri['dir']) ? 'dir/'.$uri['dir'] : '')) ;?>" id="create_dir" name="create_dir" style="padding-top: 10px" enctype="multipart/form-data">
	                    <div style="font-size: 13px; font-weight: normal;">
	                    <b>Folder's name</b>: <input type="text" name="dir_name" id="dir_name"/> 
	                    <input type="submit"  value="Create folder" />
	                    </div> 
                    </form> 
                </div> 
            </div>
        </div>
        
        <div id="wrapper">
            <div style="width: 98%; padding-left: 10px; margin-top: 10px;" class="breadCrumb">
	            <div style="float: left; width: 300px;">
		            <ul>
		                <li><a href="<?php echo creat_uri($uri_2);?>">Root</a></li>
		                
		                <?php
		                	$defalt_thumb 	= "thumb_".end(thumbs()); // end() functions will return the last element of input - thumbs().
							$tt         	= count($root);
							foreach($root as $i => $sub) {
			                    echo '<li><a href="'.creat_uri($uri_2, $sub).'">'.$sub.'</a></li>';
			                    
			                    if(isset($uri_2['dir']) && $uri_2['dir'] != ''){
			                    	$uri_2['dir'] .= ':'.$sub;
			                    }else {$uri_2['dir'] = $sub;}
							}
						?>
		            </ul>
	            </div>
            	<span onclick="togleUpload();" style="float: right; cursor: pointer; color: blue; margin-top: 5px; margin-right: 15px;" id="toggleText">Show upload form</span>
            </div>
        
			<div id="paging_container" class="container">
				
                <div style="float: left; width: 98%; margin: 10px;" id="imagesThumb">
	                <?php if($map) {?>
	    				<?php foreach($map as $item){ ?>
	    				
	    					<?php if(preg_match('@\.(png|jpg|gif)@is', $item)){ ?>
		                        <div style="float: left; width: 80px; margin: 10px;" id="imagesThumb">
		                            <img width="87" src="<?php echo creat_path($uri, $defalt_thumb.'/'.$item);?>" style="border: 3px solid rgb(204, 204, 204); cursor: pointer; float: left; margin-right: 5px; margin-top: 5px;" onclick="add_to('<?php echo creat_path($uri,  $defalt_thumb."/".$item); ?>');"  class="imagesContextAction" />
		                        </div>
	    					
	    					<?php }elseif(!preg_match('@(thumb\_|\.flv|\.mp4)@is', $item)){?>
	    						<div style="width: 188px; float: left; margin-bottom: 10px;">
	    							<a href="<?php echo creat_uri($uri, $item); ?>"><?php echo $item; ?></a>
	    						</div>&nbsp;&nbsp;
	    					
	    					<?php } ?>
	    				<?php } ?>
	                <?php } ?>
                </div>
				
				<div style="margin:50px 0; clear:both"></div>

			</div>									
		
		</div> 
	</body>
</html>